<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title=" " :background="{ background: '#f8f8f8'}" :border-bottom="false" back-icon-name="" back-text="取消" :back-text-style="{color:'#404133'}">
			<view class="slot-wrap" slot="right">
				<u-button size="mini" type="success" @click="handleLink" >完成</u-button>
			</view>		
		</u-navbar>
		<!-- #endif -->
		<u-grid @click="clickGrid">
			<u-grid-item v-for="(item, index) in bgList" :key="index"  :index="index">
				<image :src="item.src" class="img" mode="scaleToFill"></image>
				<view class="check-box" v-show="item.isCheck"><u-icon style="display: inline-block;" name="checkbox-mark"></u-icon></view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
import { api } from '../../api/api';
import { myRequest } from '../../util/api';

export default {
	data() {
		return {
			bgList:[]
		};
	},
	methods: {
		clickGrid(index){
			this.bgList.forEach((item,i)=>{
				if(index == i) item.isCheck = !item.isCheck;
				else item.isCheck = false;
			})
		},
		//自定义标题栏按钮 h5&&app
		onNavigationBarButtonTap({ index }) {
			if (index == 0) {
				this.handleLink()
			}
		},
		//处理跳转逻辑
		handleLink(){
			const item = this.bgList.find(it=>it.isCheck);
			var user = uni.getStorageSync('_user_info');
			let upload_url = this.$BASE_URL + api.upload;
			if(item){
				uni.getImageInfo({
					src: item.src,
					success: function (image) {
						uploadImage(image.path);
					}
				});
				this.$u.vuex('_user_info.pictureBanner', item.src);
				this.$u.route({ type: 'back',delta:2});
			}
			
			async function uploadImage(path) {
				// 1. 创建一个上传任务对象
				var task = plus.uploader.createUpload(upload_url,
					{},
					function(t, status) {
						var resp = JSON.parse(t.responseText);
						// 上传完成
						if (resp.code == 200 && resp.httpCode == 200) {
							
						} else {
							plus.nativeUI.toast('上传失败');
						}
					}.bind(this)
				);
				// 2. 添加上传的文件
				task.addFile(path, { key: "file" });
				// 3. 设置其他参数
				task.addData("userId", user.id + "");
				task.addData("uploadType", 'picture_banner');
				// 4. 上传
				task.start();
				// plus.nativeUI.toast('更换成功');
			}
		},
	},
	onShow() {
		this.bgList = JSON.parse(JSON.stringify(this.circleBgList))
	}
};
</script>

<style lang="scss" scoped>
.content {
	.img {
		width: calc(750rpx / 3.4);
		height: calc(750rpx / 3.4);
	}
	.check-box{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		background-color: $u-type-success;
		opacity: 0.7;
		text-align: center;
		color:#FFFFFF;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx; 
	}
}
</style>
